<template>
  <!-- 柱状图 -->
  <div id="Thermometer">
    <div ref="chart01" class="chart01"></div>
  </div>
</template>

<script>
export default {
  name: "Thermometer",
  components: {},
  props:{
    Tcolor: {
      type: String,
      default: "green"
    },
  },
  data() {
    return {
      value: 60,
    };
  },
  computed: {
    CurrentColor(){
      switch (this.Tcolor) {
        case "green":
          return "#71c084"
        case "red":
          return "#ec6e71"
        case "yellow":
          return "#e2d05a"
      }
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.drawThermometer();
  },

  methods: {
    drawThermometer() {
      let that = this;
      let mychart = that.$echarts.init(that.$refs.chart01);
      let option = {
        backgroundColor: "transparent", //背景色
        series: [
          {
            type: "liquidFill", //水位图
            radius: "140%", //显示比例
            data: [0.6], // data个数代表波浪数
            amplitude: 0,
            shape: 'path://M324.234,516.886c0-41.643,0-252.383,0-258.626c0-14.688-11.906-26.594-26.593-26.594c-14.688,0-26.595,11.906-26.595,26.594c0,5.271,0,216.887,0,258.625c-13.383,8.71-22.24,23.791-22.24,40.949c0,26.97,21.863,48.834,48.834,48.834c26.969,0,48.834-21.864,48.834-48.834C346.475,540.676,337.617,525.596,324.234,516.886z',
            color: [this.CurrentColor], //波浪颜色
            outline: {
                itemStyle: {
                  borderWidth: 2,
                  borderColor: this.CurrentColor,
                },
                borderDistance: 0, //内容距离边框的大小
            },
            backgroundStyle: {
              // color: "#33547e", //内容颜色
              color: "rgba(58,183,193, .2)"
            },
            label: {
              //标签设置
              normal: {
                position: ["50%", "90%"],
                formatter: "53", //显示文本,
                textStyle: {
                  fontSize: "24px", //文本字号,
                  color: "#fff",
                  fontWeight: "200",
                },
              },
            },
            
          },
        ],
      };

      mychart.setOption(option);
      //   窗口自适应
      setTimeout(() => {
        let resizeFn = function () {
          mychart.resize();
        };
        window.addEventListener("resize", resizeFn);
        this.$once("hook:beforeDestroy", () => {
          mychart.dispose();
          mychart = null;
          window.removeEventListener("resize", resizeFn);
        });
      }, 200);
    },
  },
};
</script>
<style lang='less' scoped>
#Thermometer {
  width: 100%;
  height: 100%;
  // margin-top: 36px;
  .chart01 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    clear: both;
  }
}
</style>